<template>
	<view v-if="!isLoading" class="container b-f">

		<!-- 分销商中心 -->
		<view class="center" v-if="isDealer">

			<!-- 头部背景图 -->
			<view class="dealer-bg">
				<image class="image" mode="widthFix" :src="setting.background"></image>
			</view>

			<!-- 内容区 -->
			<view class="widget-body b-f dis-flex flex-dir-column flex-y-center">
				<!-- 用户信息 -->
				<view class="widget widget__base m-top20 b-f dis-flex flex-dir-column">
					<view class="base__user f-30">
						<!-- 用户头像 -->
						<view class="user-avatar">
							<avatar-image :url="user.avatar_url" :width="150" :borderWidth="4" :borderColor="`#fff`" />
						</view>
						<view class="user-nickName f-32">{{ user.nick_name }}
						 <view style="display: flex; width: 95px; margin-left: 12px;">
							<view v-for="(item, index) in gradeArray" :key="index">
								<img src="/static/star.png" style="width: 16px; height: 16px;">
							</view>
						  </view>
						</view>
						<view class="user-referee f-24 col-9">
							{{ setting.words.index.words.referee.value }}：{{ refereeName }}
						</view>
					</view>
					<view class="base__capital dis-flex flex-dir-column">
						<!-- 佣金卡片 -->
						<view class="capital-card dis-flex">
							<view class="card-left">
								<view class="f-28 col-f">
									<text space="ensp">{{ setting.words.index.words.money.value }}
										{{ dealer.money }}</text>
									<text class="m-l-10">元</text>
								</view>
								<view class="f-28 col-f">
									<text space="ensp">{{ setting.words.index.words.freeze_money.value }}
										{{ dealer.freeze_money }}</text>
									<text class="m-l-10">元</text>
								</view>
								<view class="f-28 col-f">
									<text space="ensp">{{ setting.words.index.words.un_return_money.value }}
										{{ dealer.un_return_money }}</text>
									<text class="m-l-10">元</text>
								</view>
							</view>
							<view class="card-right flex-box dis-flex flex-x-end flex-y-center">
								<view class="withdraw-btn f-26" @click="$navTo('pages/dealer/withdraw/apply')">
									{{ setting.words.index.words.withdraw.value }}
								</view>
							</view>
						</view>
						<!-- 已提现金额 -->
						<view class="capital-already clear">
							<view class="already-left f-26 fl">{{ setting.words.index.words.total_money.value }}</view>
							<view class="already-right f-26 fr">{{ dealer.total_money }}元</view>
						</view>
					</view>
				</view>
                <!-- 陪诊服务 -->
				<view class="widget widget__operat clear b-f">
					<view class="operat__item" @click="$navTo('pagespzs/pzs/auth-info')">
						<view class="item__icon">
							<text class="iconfont icon-kefu" style="color:#FF7575;"></text>
						</view>
						<view class="item__text f-26">陪诊服务</view>
					</view>
					<view class="operat__item" @click="$navTo('pagespzs/pzs/pz-order')">
						<view class="item__icon">
							<text class="iconfont icon-order-c" style="color:#5fa5ff;"></text>
						</view>
						<view class="item__text f-26">陪诊定单</view>
					</view>
					<view class="operat__item" @click="$navTo('pagespzs/pzs/rzxy')">
						<view class="item__icon">
							<text class="iconfont icon-bianji" style="color:#59C78E;"></text>
						</view>
						<view class="item__text f-26">陪诊协议</view>
					</view>
				
					<view class="operat__item" @click="$navTo('pages/dealer/withdraw/list')">
						<view class="item__icon">
							<text class="iconfont icon-zhangben" style="color:#F9BA21;"></text>
						</view>
						<view class="item__text f-26">{{ setting.words.withdraw_list.title.value }}</view>
					</view>					
					<view class="operat__item" @click="$navTo('pages/dealer/bonus')">
						<view class="item__icon">
							<text class="iconfont icon-balance-pay" style="color:#5fa5ff;"></text>
						</view>
						<view class="item__text f-26">奖金明细</view>
					</view>
					<view class="operat__item" @click="$navTo('pages/dealer/log')">
						<view class="item__icon">
							<text class="iconfont icon-jifen" style="color:#59C78E;"></text>
						</view>
						<view class="item__text f-26">{{ setting.words.return_money.title.value }}</view>
					</view>
					<view class="operat__item" @click="$navTo('pages/dealer/order')">
						<view class="item__icon">
							<text class="iconfont icon-dingdan" style="color:#FF7575;"></text>
						</view>
						<view class="item__text f-26">{{ setting.words.order.title.value }}</view>
					</view>
					<view class="operat__item" @click="$navTo('pages/dealer/team')">
						<view class="item__icon">
							<text class="iconfont icon-tuandui" style="color:#5fa5ff;"></text>
						</view>
						<view class="item__text f-26">{{ setting.words.team.title.value }}</view>
					</view>
					<view class="operat__item" @click="$navTo('pages/dealer/poster')">
						<view class="item__icon">
							<text class="iconfont icon-erweima" style="color:#59C78E;"></text>
						</view>
						<view class="item__text f-26">{{ setting.words.poster.title.value }}</view>
					</view>
				</view>
				
				
			</view>
		</view>

		<!-- 当前不是分销商 -->
		<view class="container b-f" v-if="!isDealer">
			<view class="no-dealer">
				<view class="no-icon dis-flex flex-x-center">
					<image src="/static/not-dealer.png"></image>
				</view>
				<view class="no-msg dis-flex flex-x-center f-30">{{ setting.words.index.words.not_dealer.value }}
				</view>
				<!-- 立即申请 -->
				<view class="no-submit form-submit">
					<view class="button" @click="$navTo('pages/dealer/apply')">
						{{ setting.words.index.words.apply_now.value }}
					</view>
				</view>
			</view>
		</view>

	</view>

</template>

<script>
	import AvatarImage from '@/components/avatar-image'
	import * as Api from '@/api/dealer'

	export default {
		components: {
			AvatarImage
		},
		data() {
			return {
				// 正在加载
				isLoading: true,
				// 当前用户信息
				user: undefined,
				// 当前是否为分销商
				isDealer: false,
				// 当前分销商信息
				dealer: undefined,
				// 推荐人昵称
				refereeName: undefined,
				//级别数组
				gradeArray: [],
				// 分销设置
				setting: {
					background: undefined,
					words: undefined
				}
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.getCenter()

		},

		methods: {

			// 获取分销商中心数据
			getCenter() {
				const app = this
				app.isLoading = true
				Api.center()
					.then(result => {
						// api数据赋值
						const data = result.data
						app.isDealer = data.isDealer
						app.user = data.user
						app.dealer = data.dealer
						app.refereeName = data.refereeName
						app.setting = data.setting
						// 设置当前页面标题
						app.setPageTitle()
						app.isLoading = false
						app.gradeArray = Array(data.user.dealer_grade)

					})
			},

			// 设置当前页面标题
			setPageTitle() {
				uni.setNavigationBarTitle({
					title: this.setting.words.index.title.value
				})
			}

		}
	}
</script>

<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	
	.dealer-bg {
		.image {
			width: 100%;
		}
	}

	.widget-body {
		position: relative;

		.widget {
			width: 88%;
			box-sizing: border-box;
			box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.11);
			border-radius: 12rpx;
		}
	}

	.widget__base {
		margin-top: -60rpx;

		.base__user {
			position: relative;
			padding: 15rpx 40rpx;
			border-bottom: 1rpx solid #e7e7e7;

			.user-avatar {
				position: absolute;
				top: -75rpx;
				right: 60rpx;
			}

			.user-nickName {
				display: flex;
				margin-top: 30rpx;
				margin-bottom: 10rpx;
				width: 100%;
			}

		}

		.base__capital {
			padding: 35rpx;

			.capital-card {
				height: 200rpx;
				padding: 36rpx 0;
				background-color: #8e84fc;
				border-radius: 10rpx;
				box-sizing: border-box;

				.card-left {
					flex: 1;
					display: flex;
					justify-content: space-around;
					align-items: flex-start;
					flex-direction: column;
					padding-left: 32rpx;
				}

				.card-right {
					.withdraw-btn {
						width: 130rpx;
						height: 50rpx;
						background: #fff;
						color: #8e84fc;
						border-radius: 25rpx;
						margin-right: 32rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}

			.capital-already {
				padding: 20rpx;
				padding-bottom: 0;
			}
		}
	}

	/* 操作列表 */
	.widget__operat {
		padding: 50rpx;
		margin-top: 40rpx;

		.operat__item {
			width: 33.33333%;
			float: left;
			margin-bottom: 50rpx;
			text-align: center;

			&:last-child {
				margin-bottom: 0;
			}

			.item__icon {
				margin-bottom: 8rpx;
				font-size: 58rpx;
			}
		}
	}

	/* 当前不是分销商 */
	.no-dealer {
		padding-top: 150rpx;
	}

	.no-icon {
		image {
			width: 420rpx;
			height: 240rpx;
		}
	}

	.no-msg {
		padding: 86rpx 0;
	}

	.form-submit {
		.button {
			font-size: 30rpx;
			background: #786cff;
			border: 1rpx solid #786cff;
			color: white;
			border-radius: 50rpx;
			padding: 22rpx 0;
			width: 470rpx;
			box-sizing: border-box;
			margin: 0 auto;
			text-align: center;

			&.disabled {
				opacity: 0.6;
			}
		}
	}
</style>